<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>火星时代-接金币</title>
<script src="js/jquery-1.11.3.min.js"></script>
<style>
	*{ margin: 0;padding: 0;}
	li{ list-style: none;}
	#wrap{margin: 0 auto; width: 455px; height:650px;background: url(images/bj.jpg) no-repeat left top; background-size: cover; position: relative; overflow: hidden;}
	#wrap img{position: absolute; }
	.money0,.boom{ width: 30px; top: 0px;}
	.money1{ width: 15px;top: 0px;}
	#user{ left: 100px; bottom: 0; width: 75px;}
	.begin{margin: auto; position: absolute; top: 30%; left: 200px; padding: 5px 10px; background: rgba(46,139,87,.8); border: none; color: #fff; cursor: pointer; border-radius: 3px; z-index: 10;}
	.hxsd{ text-align: center; width: 455px; position: absolute; top: 250px; opacity: .1; font-size:25px; font-weight: 900;}
	.timebar{ width: 200px; height: 20px; overflow: hidden;border: 2px solid #007DDC; border-radius: 10px; position: absolute; top: 30px; left: 120px;}
	.time{ width: 200px; height: 20px; border-radius: 10px;  background: #ff0; margin-left: 0px;}
	.gameTime{float: right; height: 25px; line-height: 25px; line-height: 25px; background: rgba(255,255,255,.8); font-size: 14px; font-family: "微软雅黑"; padding: 0 5px; border-top-left-radius: 3px;border-bottom-left-radius: 3px; color: #333;}
	.score{float: left; height: 25px; line-height: 25px; background: rgba(255,255,255,.8); font-size: 15px; font-family: "微软雅黑";padding: 0 5px; border-top-right-radius: 3px;border-bottom-right-radius: 3px; color: #333;}
	.gameTime span{padding-right: 3px; color: #C81623;}
	.score span{padding:0 3px; color: seagreen; font-size: 16px;}
</style>
</head>
<body>
	<div id="wrap">
		<div class="score">score: <span>0</span></div>
		<div class="gameTime">游戏时间: <span></span>秒</div>
		<div class="timebar"><div class="time"></div></div>
		<button class="begin">开始游戏</button>
		<div class="hxsd">火星时代-接金币游戏</div>
		<img src="images/people.png" id="user"/>
	</div>
</body>
<script src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
	var user = document.getElementById('user');
	var wrap = document.getElementById("wrap");
	var oScore = document.getElementsByClassName('score')[0].children[0];
	var oGameTime = document.getElementsByClassName('gameTime')[0].children[0];
	var oBtn = document.getElementsByClassName('begin')[0];
	var makeTimer = null;
	var gameTimer = null;
	var fallTimer = null;
	var maxTime = 600;
	var score = 0;	//初始分数
	var min;
	var max;
	
	var remove =  modal();
	var gameTime = 60;	//设置游戏时间时长
	oGameTime.innerHTML = gameTime;
	
	//点击开始游戏
	oBtn.onclick = function(){
		oBtn.style.display = 'none';
		remove();
		
		//初始化速度
		var speed0 = 3;	//大金币
		var speed1 = 2;	//小金币
		var speedBoom = 2;	//炸弹
		
		//调用时间条方法
		timeBarSlide(gameTime);
		//人物移动
		move();
		//随机生成金币/炸弹
		create(1000);
		//调用金币落下方法
		fall(speed0,speed1,speedBoom);
		
		//右上角倒计时
		var timer1 = setInterval(function(){
			oGameTime.innerHTML = gameTime-1;
			gameTime--;
			if(gameTime == 0){
				clearInterval(timer1);
			}
		},1000);
		
		//每30秒加速一次
		fallTimer = setInterval(function(){
			//掉落加速
			fall(speed0*0.2,speed1*0.2,speedBoom*0.3);
			//生成加速
			create(700);
		},30000);
	}
	
	//人物移动
	function move () {
		$("#wrap").mousemove(function(ev){
			console.log();
		    var l = ev.pageX-$("#wrap").offset().left - $("#user").outerWidth()/2;
		    if(l >= 380)l=380;
		    if(l <= 0)l = 0 ;
			$("#user").css('left',l);
		})
	}
	
	//生成
	function create (createTime) {
		clearInterval(makeTimer);
		var imgArr = ["boom","money0","money1"];
		makeTimer = setInterval(function(){
			var index = parseInt(Math.random()*100);
			//分配出现几率
			if(index < 60){
				index = 2;
			}else if(index < 80){
				index = 1;
			}else{
				index = 0;
			}
			var posIndex = getRandom(425,0,false);
			var oImg = document.createElement('img');
			oImg.src = "images/"+imgArr[index]+".png";
			if(index==0)oImg.className = "boom";
			if(index==1)oImg.className = "money0";
			if(index==2)oImg.className = "money1";
			oImg.style.left = posIndex+"px";
			oImg.style.top = "50px";
			wrap.appendChild(oImg);
		},createTime);
	}
	
	//掉落
	function fall (speed0,speed1,speedBoom) {
		setInterval(function(){
			var aImg0 = document.getElementsByClassName('money0');
			var aImg1 = document.getElementsByClassName('money1');
			var aBoom = document.getElementsByClassName('boom');
			min = user.offsetLeft;
			max = min+50;
			//碰到消失并计算分数	参数：类型、速度、分数
			disappear(aImg0,speed0,5);
			disappear(aImg1,speed1,3);
			disappear(aBoom,speedBoom,-6);
		},30);
	}
	
	//时间条
	function timeBarSlide (gTime) {
		var oBar = document.getElementsByClassName('time')[0];
		oBar.style.marginLeft = '-200px';
		oBar.style.transition = 'margin-left '+gTime+'s linear';
		//结束提示
		var tempTime = gTime*1000;
		setTimeout(function(){
			alert('游戏结束!! 您的分数是'+score+'分');
			clearInterval(fallTimer);
			location.reload();
		},tempTime);
	}
	
	//消失并计算分数
	function disappear (obj,fallOffset,countScore) {
		for(var i=0; i<obj.length; i++){
			obj[i].style.top = obj[i].offsetTop+fallOffset+'px';
			if(obj[i].offsetTop>=550 && obj[i].offsetTop<=580){
				if(obj[i].offsetLeft>min && obj[i].offsetLeft<max){
					obj[i].style.display = 'none';
					score += countScore;
					if(score < 0){
						alert("您失败了！！！");
						clearInterval(fallTimer);
						location.reload();
					}
					oScore.innerHTML = score;
				}
			}
		}
	}
	
	function getRandom (max,min,flag) {
		return parseInt(Math.random()*(max-min+flag)+min);
	}
	
	function modal () {
		var modal = $("<div>");
		modal.css({
			'width':'455px',
			'height':'650px',
			'background':'rgba(0,0,0,.5)',
			'position':'absolute',
			'left':0,
			'top':0,
		});
		modal.appendTo($("#wrap"));
		return function(){
			modal.remove();
		}
	}

	
	
</script>
</html>
